<template>
    <div class="card">
        <div style="margin-bottom: 10px;">
            <el-input placeholder="请输入电影名称查询" v-model="data.comment" clearable style="width: 300px;margin-right: 10px;"/>
            <el-button type="primary" @click="load">查询</el-button>
        </div>
        <el-table :data="data.tableData" stripe>
            <el-table-column prop="filmName" label="电影名称" />
            <el-table-column prop="score" label="评分">
                <template #default="scope">
                    <el-rate disabled v-model="scope.row.score" allow-half />
                </template>
            </el-table-column>
            <el-table-column prop="comment" label="评论">
                <template #default="scope">
                    <el-button @click="preview(scope.row.comment)">查看内容</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="用户名称" />
            <el-table-column prop="time" label="评论时间" />
            <el-table-column prop="type" label="类型">
                <template #default="scope">
                    <el-tag type="primary" v-if="scope.row.type === '短评'">短评</el-tag>
                    <el-tag type="success" v-if="scope.row.type === '长评'">长评</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 5px;">
            <el-pagination background layout="total,prev, pager, next"
                           v-model:current-page="data.pageNum"
                           v-model:page-size="data.pageSize"
                           :total="data.total"  @current-change="load" />
        </div>
        <el-dialog v-model="data.formVisibleComment" title="评论内容" width="40%">
            <div v-html="data.commentContent" v-if="data.commentContent"></div>
            <div class="longComment" v-html="data.commentLong"></div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.formVisibleComment = false">关 闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>

</template>

<script setup>
import {reactive} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
const data = reactive({
    user: JSON.parse(localStorage.getItem('system-user') || '{}'),
    tableData: [],
    total: 0,
    pageNum: 1,
    pageSize: 5,
    filmName: "",
    comment: "",
    score: "",
    userName: "",
    time: "",
    type: "",
    formVisible: false,
    formVisibleComment: false,
    commentContent: null,
    form: {},
    commentLong: ""
})
const load = () => {
    request.get("/comment/selectPage",
        {
            params: {
                pageNum: data.pageNum,
                pageSize: data.pageSize,
                commentContent: data.commentContent,
                commentLong: data.commentLong,
                filmName: data.filmName,
                userId: data.user.role ==='ADMIN' ? null : data.user.id,
            }
        }).then(res => {
        data.tableData = res.data.list;
        data.total = res.data.total;
    })
}
load();

const preview = (comment) => {
    data.commentContent ? data.commentContent = comment : data.commentLong = comment;
    data.formVisibleComment = true;
}

// 删除按钮触发
const handleDelete = (id) => {
    ElMessageBox.confirm(
        '你确定要删除该条记录吗?',
        '确认删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            request.delete("/comment/delete/" + id).then(res => {
                if (res.code === '200') {
                    load();
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                }
            })

        })
        .catch(() => {
            ElMessage.error('用户已取消删除')
        })

}
</script>
<style>
.longComment img {
    width: 100% !important;
}
</style>

